<!--
 * @Author: your name
 * @Date: 2021-08-31 20:22:28
 * @LastEditTime: 2021-09-02 21:57:01
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \新建文件夹 (6)\broker\src\views\login\Login.vue
-->
<template>
  <div class="login">
    <div class="head">
      <p>宏业经纪人</p>
      <p>
        <span class="iconfont icon-dian"></span>
        <span class="iconfont icon-yuanxinyuan"></span>
      </p>
    </div>
    <div class="min">
      <img :src="imgUrl" alt="" />

      <van-form class="frombox">
        <van-field
          v-model="username"
          name="手机号"
          placeholder="手机号"
          :rules="[{ validator, message: '请填写正确手机号' }]"
        />
        <div class="codebox">
          <p>
            <van-field
              v-model="password"
              name="验证码"
              placeholder="验证码"
              :rules="[{ required: true, message: '请填写验证码' }]"
            />
          </p>
          <van-button
            class="codetap"
            type="primary"
            native-type="button"
            :disabled="btnDisable"
            @click="sendCheckCode"
            >{{ btnText }}</van-button
          >
        </div>
        <div style="margin: 16px">
          <van-button
            round
            block
            type="info"
            native-type="submit"
            class="yuyuttab"
            @click="onSubmit"
            >登录</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import axios from "../../utils/axios";
import { Toast } from "vant";
export default {
  data() {
    return {
      username: "",
      password: "",
      btnText: "发送验证码",
      btnDisable: false,
      count: 5,
      code: "",
      imgUrl: require("../../assets/1.png"),
    };
  },
  methods: {
    //手机号正则
    validator(val) {
      return /^1[2-9]\d{9}$/.test(val);
    },
    getCode() {
      //验证码随机生成时间
      const count = Math.floor(Math.random() * 5 + 3);
      console.log(count);
      //随机生成四位数
      const random = new Array("0","1","2","3","4","5","6","7","8","9");
      for (var i = 0; i < 4; i++) {
        const index = Math.floor(Math.random() * 9);
        this.code += random[index];
      }
      //定时器
      setTimeout(() => {
        Toast(`验证码为:${this.code}`);
        console.log(`验证码为:${this.code}`);
      }, count * 1000);
    },
    //开始验证
    sendCheckCode() {
      if (/^1[2-9]\d{9}$/.test(this.username)) {
        this.getCode();
        this.btnDisable = true;
        let timeout = 30;
        let timer = null;
        //倒计时
        timer = setInterval(() => {
          timeout--;
          this.btnText = `${timeout}s后重试`;
          if (timeout <= 0) {
            clearInterval(timer);
            this.btnDisable = false;
            this.btnText = "发送验证码";
            this.code = "";
          }
        }, 1000);
      } else {
        Toast("请输入正确手机号");
      }
    },
    onSubmit() {
      if (this.password !== "" && this.code !== "") {
        if (this.password === this.code) {
          console.log(this.password, this.code);
          axios
            .post("/login", {
              username: "admin",
              password: "admin",
            })
            .then((res) => {
              console.log(res,'res.');
              if (res.meta.status === 200) {
                //token值存储本地
                window.sessionStorage.setItem("broker_token", res.data.token);
                window.localStorage.setItem("info", JSON.stringify(res.data));
                this.$router.push({
                  path: "/home"
                });
                Toast("登陆成功");
              } else {
                Toast("手机号未注册");
              }
            });
        } else {
          if (code === "") {
            Toast("验证码错误");
          } else {
            Toast("验证码失效");
          }
        }
      }
    },
  },
  create() {
    this.getCode();
    this.sendCheckCode();
    this.validator();
  },
};
</script>

<style>
.login {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.head {
  width: 100%;
  height: 50px;
  display: flex;
  background-color: rgb(70, 142, 224);
  color: #fff;
  align-items: center;
  justify-content: space-between;
}
.head p {
  padding: 0 20px;
}
.head p:nth-child(2) {
  border: 1px solid #fff;
  border-radius: 20px;
  padding: 3px 5px;
  margin-right: 30px;
}
.head p span {
  margin-left: 10px;
}
.min img {
  margin-top: 20px;
  width: 100%;
  height: 200px;
}
.codebox {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.password {
  width: 60px;
}
.codetap {
  height: 35px;
  width: 110px;
  align-items: center;
  padding: 10px 20px;
  border-radius: 20px;
  background-color: rgb(70, 142, 224);
  font-size: 4px;
  color: #fff;
  margin-left: 8px;
  margin-top: 10px;
}
.frombox {
  padding: 0 30px;
  margin-top: 20px;
}
.frombox input {
  width: 100%;
  height: 40px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  margin-bottom: 20px;
  text-indent: 20px;
  font-size: 14px;
  color: #666;
  line-height: 12px;
  border-radius: 10px;
  outline: none;
}
.yuyuttab {
  width: 100%;
  height: 40px;
  border-radius: 10px;
  line-height: 16px;
  margin-top: 5px;
  background-color: rgb(70, 142, 224);
  font-size: 16px;
  text-indent: 0;
  color: #fff;
  border: 0 none;
}
</style>